<template>
	<view class="pa">
		<view class="pro_banner">
			<swiper class="swiper" indicator-dots="true" indicator-active-color="#ffffff" indicator-color="rgba(255, 255, 255, .5)">
				<swiper-item><image class="pic" :src="Url+'mine/integral/bigpic.png'" mode=""></image></swiper-item>
				<swiper-item><image class="pic" :src="Url+'mine/integral/bigpic.png'" mode=""></image></swiper-item>
				<swiper-item><image class="pic" :src="Url+'mine/integral/bigpic.png'" mode=""></image></swiper-item>
			</swiper>
			<view class="cutdown">
				<!-- <image :src="Url+'mine/index/timelimit.png'" mode=""></image> -->
				<image :src="Url+'mine/new/cutdown_banner.png'" mode=""></image>
				<view class="cutdown_item">
					<view class="pro_num">共3件奖品</view>
					<view class="cutdown_cutdown">
						<view class="cutdown_cutdown_i">距开奖仅剩</view>
						<uni-countdown :day="1" :hour="12" :minute="12" :second="12"></uni-countdown>
					</view>
				</view>
			</view>
			<!-- 弹幕 -->
			<view class="barrage">
				<!-- 				'animation': 'mymove '+ item.time+'s linear forwards' -->
				<!-- 				:style="'top:'+item.top+'upx';'left:'+item.left+'upx' " -->
				<!-- <view class="barrage_item" 
				v-for="(item,index) in headerPic" 
				:style="{top:+(item.top/2)+'px',left:+(item.left/2)+'px'}"
				:key="index">
					<image ::src="item.pic" mode=""></image>
					刚刚参与了抽奖
				</view> -->
			</view>
		</view>

		<view class="product_content">
			<view class="title">花牛苹果 约950g</view>
			<view class="product_content_header">
				<!-- <view class="header_pic" :style="{left:index * 40 + 'upx'}" v-for="(item, index) in headerPic" :key="index">
					<image :src="Url+'mine/header.png'" mode=""></image>
				</view> -->
				<view class="header_pic" :style="{left:headerPic.length * 40 + 'upx'}"><image :src="Url+'mine/new/more.png'" mode=""></image></view>
				<view class="header_num">45人参加</view>
			</view>
			<view class="joinlottery">
				0元参与抽奖
			</view>
		</view>
		<view class="lotter_rule">
			<view class="lotter_rule_l">
				<view class="lotter_rule_title">
					抽奖规则
				</view>
				<view class="lotter_rule_rule">
					参与抽奖.邀请好友.中奖发货
				</view>
			</view>
			<i class="icon">&#xe637;</i>
		</view>
		
		<!-- 商品详情 -->
		<view class="goodDetail">
			<view class="goodDetailTitle">
				商品详情
			</view>
			<ul>
				<li v-for="(item,index) in goodDetailList" :key="index">
					<image ::src="item.pic"></image>
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
import nowGroup from '@/components/nowgroup/nowgroup.vue';
import uniCountdowno from '@/components/uni-countdown/uni-countdown1.vue';
import lBarrage from '@/components/l-barrage/l-barrage.vue'
export default {
	components: { uniPopup, uniCountdown, nowGroup, uniCountdowno,lBarrage},
	data() {
		return {
			Url:this.Imgurl,
			top: 200,
			headerPic: [
				{ pic: this.Imgurl+'mine/header.png' },
				{ pic: this.Imgurl+'mine/header.png' },
				{ pic:this.Imgurl+'mine/header.png'},
				{ pic: this.Imgurl+'mine/header.png' }
			],
			goodDetailList: [{
					pic: this.Imgurl+'mine/integral/bigpic.png'
				},
				{
					pic: this.Imgurl+'mine/integral/bigpic.png'
				},
				{
					pic: this.Imgurl+'mine/integral/bigpic.png'
				}
			]
		};
	},
	onShow() {
		this.getinfo()
		this.$refs.lBarrage.start([
		    '新年到，祝福来报到：大财、小财、意外财，财源滚滚',
		    '亲情、爱情、朋友情，份份真情',
		    '官运、财运、桃花运，运运亨通',
		    '爱人、亲人、家里人，人人平安',
		    '福气多多','快乐连连','万事圆圆','微笑甜甜',
		    '一帆风顺','二龙腾飞','三羊开泰','四季平安','五福临门','六六大顺','七星高照','八方来财','九九同心','十全十美！',
		    '新年快乐',
		]);
	},

	methods: {
		// 计算弹幕的高度和距离
		getinfo () {
			this.headerPic.forEach( (item) => {
				let top= Math.ceil(Math.random()*201+100)
				let left = Math.ceil(Math.random()*1000+700)
				let time = Math.ceil(Math.floor(Math.random()*6+5));
				item.top = top
				item.left = left
				item.time = time
			})
			// console.log(this.headerPic);
			// let i = 0;
			// let len = this.headerPic.length;
			// let cycle = setInterval(()=> {
			// 	let time = 5;
			// 	// #ifndef H5
			// 	// #endif
				
			// 	if (i < len) {
			// 		this.headerPic[i].time = time;
			// 		i++;
			// 	}
			// 	else {
			// 		clearInterval(cycle);
			// 		// setTimeout(()=>{
			// 		// 	this.$emit("end",{});
			// 		// },time * 1000)
			// 	}
			// }, 500)
		}
	},

};
</script>

<style lang="less" scoped>
.swiper {
	width: 100%;
	height: 750upx;
	.pic {
		width: 100%;
		height: 100%;
	}
}
.pa {
	padding-bottom: 130upx;
	box-sizing: border-box;
}
.pro_banner {
	position: relative;
	.cutdown {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120upx;
		image {
			width: 100%;
			height: 100%;
		}
		.cutdown_item {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			padding: 0 15upx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.pro_num {
				font-size: 28upx;
				color: #ffffff;
			}
			.cutdown_cutdown {
				.cutdown_cutdown_i {
					font-size: 24upx;
					color: #f73e2f;
					text-align: center;
				}
			}
		}
	}
}

.product_content {
	background-color: #ffffff;
	padding: 0 15upx;
	box-sizing: border-box;
	overflow: hidden;
	.title {
		font-size: 32upx;
		color: #000000;
		margin-top: 30upx;
	}
	.product_content_header {
		display: flex;
		align-items: center;
		position: relative;
		height: 80upx;
		.header_pic {
			width: 48upx;
			height: 48upx;
			border-radius: 50%;
			padding: 4upx;
			background-color: #ffffff;
			position: absolute;
			image {
				width: 100%;
				height: 100%;
				border: 50%;
			}
		}
		.header_num {
			font-size: 24upx;
			color: #999999;
			margin-left: 300upx;
		}
	}
	.joinlottery {
		width: 550upx;
		height: 86upx;
		border-radius: 10upx;
		font-size: 28upx;
		color: #FFFFFF;
		text-align: center;
		line-height: 86upx;
		margin: auto;
		margin-top: 20upx;
		margin-bottom: 30upx;
		background: linear-gradient(to right,#f73e2f 0%,#FF2842 100%);
	}
}
.lotter_rule {
	width: 100%;
	height: 88upx;
	background-color: #FFFFFF;
	margin-top: 20upx;
	padding: 0 15upx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.lotter_rule_l {
		display: flex;
		.lotter_rule_title {
			font-size: 28upx;
			color: #999999;
			margin-right: 20upx;
		}
		.lotter_rule_rule {
			font-size: 28upx;
			color: #333;
		}
	}
	.icon {
		font-size: 28upx;
		color: #999999;
	}
}
.barrage {
	position: fixed;
	top: 0;
	z-index: 10;
	animation: mymove 10s linear forwards;
	.barrage_item {
		position: absolute;
		width: 260upx;
		height: 60upx;
		background-color: rgba(0,0,0,.3);
		display: flex;
		align-items: center;
		border-radius: 60upx;
		padding: 10upx;
		box-sizing: border-box;
		font-size: 24upx;
		color: #FFFFFF;
		image {
			width: 50upx;
			height: 50upx;
			margin-right: 10upx;
		}
	}
}
//商品详情
.goodDetail{
	margin-top: 20upx;
	background: #fff;
	padding-top: 10upx;
	padding-left: 25upx;
	padding-right: 15upx;
	.goodDetailTitle{
		color: #333333;
		font-weight: bold;
		font-size: 28upx;
		margin-bottom: 15upx;
	}
	ul{
		margin: 0;
		padding: 0;
		li{
			list-style: none;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			image{
				width: 90%;
				margin: 10upx 0;
			}
		}
	}
}

@keyframes mymove
{
from{
	left: 100%;
}
  to{
	  left: -300%;
	 }
}

</style>
